<template>
  <div class="qualityList">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">质检单</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="180">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="dialogUploadOpen(s.row.id)">附件管理</el-button>
            <el-button type="success" icon="edit" size="mini" @click="dialogOpen(s.row)" v-if="s.row.ckrwzt === 0"></el-button>
            <el-button type="info" size="mini" @click="dialogSearchOpen(s.row)" icon="search"></el-button>
            <el-button type="success" size="mini" @click="dialogTestOpen(s.row)" v-if="s.row.ckrwzt === 3 && s.row.zt === '0'">质量检验</el-button>
            <!--<el-button type="warning" size="mini" @click="dialogTestOpen(s.row)">质量检验</el-button>-->
          </template>
        </el-table-column>
        <el-form-item label="供应商" prop="gysmc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_gysmc"
                    placeholder="供应商名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="质检单号" prop="zjdh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_zjdh"
                    placeholder="质检单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="ASN编号" prop="asnbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_asnbh"
                    placeholder="ASN编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="cjsj">
          <el-date-picker
            v-model="autoVue_table_cjsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="质检状态" prop="zt">
          <el-select v-model="autoVue_table_zt"
                     placeholder="质检状态">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              v-for="item in QUALITYLIST.zt"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库任务" prop="ckrwzt">
          <el-select v-model="autoVue_table_ckrwzt"
                     placeholder="出库任务状态">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              v-for="item in QUALITYLIST.ckrwzt"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库任务" prop="rkrwzt">
          <el-select v-model="autoVue_table_rkrwzt"
                     placeholder="入库任务状态">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              v-for="item in QUALITYLIST.rkrwzt"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}质检单</p>
      <s-table :table="tableEdit" ref="tableEdit"></s-table>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearch">
      <p slot="title">{{dialogSearch.title}}质检单明细</p>
      <s-table :table="tableSearch" ref="tableSearch" @http="tableWatch"></s-table>
    </s-dialog>
    <s-dialog :dialog="dialogTest">
      <p slot="title">{{dialogTest.title}}质检</p>
      <s-form :form="formDialogTest" ref="formDialogTest">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="zjr" label="质检人">
              <el-input
                type="text"
                v-model="formDialogTest.zjr"
                placeholder="质检人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
          <el-form-item prop="zjsj" label="质检时间">
            <el-date-picker
              v-model="formDialogTest.zjsj"
              type="datetime"
              placeholder="质检时间">
            </el-date-picker>
          </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <s-table :table="tableTest" ref="tableTest" @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="100">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="tableQualified(s.row)">合格</el-button>
            <el-button type="danger" size="mini" @click="tableUnqualified(s.row)">不合格</el-button>
              <!--<div class="s-content">-->
                <!--<el-switch-->
                  <!--v-model="zt"-->
                  <!--on-color="#13ce66"-->
                  <!--on-text="合格"-->
                  <!--off-text="不合格"-->
                  <!--off-color="#ff4949"-->
                  <!--on-value="1"-->
                  <!--off-value="0">-->
                <!--</el-switch>-->
              <!--</div>-->
            <!--&lt;!&ndash;<el-button type="success" size="mini" @click="dialogStateOpen(s.row)">选择状态</el-button>&ndash;&gt;-->
          </template>
        </el-table-column>
      </s-table>
      <el-button slot="footer" @click="dialogTestSave">确认</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogUpload" :close="dialogUploadInit" :closeTip="false">
      <p slot="title">附件管理</p>
      <el-upload
        ref="upload"
        name="zxwms_shipment"
        :action="action"
        :before-upload="dialogUploadBefore"
        :on-success="dialogUploadSuccess"
        :on-error="dialogUploadError"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="dialogUploadSubmit">上传到服务器</el-button>
        <!--<div slot="tip" class="el-upload__tip">只能上传Excel文件</div>-->
      </el-upload>
      <s-table :table="tableUpload" ref="tableUpload"  :expand="false" @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="125">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="downloadfile(s.row)">下载</el-button>
          </template>
        </el-table-column>
      </s-table>
      <el-button slot="footer" @click="dialogUploadSave">好</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';
  import Config from '~/config';
  let {
    PublicImageServer,
  } = Config;
  function __formTest () {
    return {
      zjr: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      zjsj: { value: '', type: 'Date', rule: [ 'vNull__change' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'quality_qualityList-FEcarWms',
    head: {
      'title': '质检单管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 质检单 查看质检单信息' },
      ],
    },
    store: ['USER', 'QUALITYLIST', 'DICTIONARY_qualityList'],
    data: {
      table: {
        column:
            [
              { label: '仓库名称',
                prop: 'ckmc',
                minWidth: '0px',
                cRemarks: '',
                search: false },
              { label: '货主名称',
                prop: 'ownerMc',
                minWidth: '0px',
                cRemarks: '',
                search: false },
              { label: '供应商名称',
                prop: 'gysmc',
                minWidth: '0px',
                cRemarks: '',
                search: true },
              { label: '质检单号',
                prop: 'zjdh',
                minWidth: '0px',
                cRemarks: '',
                search: true },
              { label: 'ASN编号',
                prop: 'asnbh',
                minWidth: '0px',
                cRemarks: '',
                search: true },
              { label: '创建时间',
                prop: 'cjsj',
                minWidth: '0px',
                type: 'DateRange',
                formatter: (row, column) => {
                  return this.a.methods.formatterTime(row[column.property || column], 6);
                },
                cRemarks: '',
                search: true },
              { label: '质检时间',
                prop: 'zjsj',
                minWidth: '0px',
                type: 'DateRange',
                formatter: (row, column) => {
                  return this.a.methods.formatterTime(row[column.property || column], 6);
                },
                cRemarks: '',
                search: false },
              { label: '质检人',
                prop: 'zjr',
                minWidth: '0px',
                cRemarks: '',
                search: false },
              { label: '质检状态',
                prop: 'show_zt',
                minWidth: '0px',
                cRemarks: '',
                search: true },
              { label: '出库任务状态',
                prop: 'show_ckrwzt',
                minWidth: '0px',
                cRemarks: '',
                search: true },
              { label: '入库任务状态',
                prop: 'show_rkrwzt',
                minWidth: '0px',
                cRemarks: '',
                search: true } ],
        url: '/wmsqualityinspectionlist/list',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      dialog: {
        title: '修改',
        row: {},
        size: 'large',
      },
      tableEdit: {
        column:
          [
            { label: '质检方式',
              prop: 'zjsf',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品编号',
              prop: 'goodsbh',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品名称',
              prop: 'goodsmc',
              minWidth: '190px',
              cRemarks: '',
              search: false },
            { label: '包装名称',
              prop: 'bzmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '单位名称',
              prop: 'dwmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '收货数量',
              prop: 'shsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '应检数量',
              prop: 'yjsl',
              minWidth: '0px',
              cRemarks: '',
              elInputNumber: {
                min: 1,
                controls: [false, true],
                max: 'shsl',
              },
              search: false },
            { label: '样品数量',
              prop: 'ypsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '质检状态',
              prop: 'show_zt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '批次',
              prop: 'pc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '生产日期',
              prop: 'scrq',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              search: false } ],
        url: '/wmsqualityinspectionlistdetailed/list',
        key: 'id',
        tableColumn: 7,
      },
      dialogSearch: {
        title: '查看',
        size: 'large',
      },
      tableSearch: {
        column:
          [
            { label: '质检方式',
              prop: 'zjsf',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品编号',
              prop: 'goodsbh',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品名称',
              prop: 'goodsmc',
              minWidth: '190px',
              cRemarks: '',
              search: false },
            { label: '包装名称',
              prop: 'bzmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '单位名称',
              prop: 'dwmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '收货数量',
              prop: 'shsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '应检数量',
              prop: 'yjsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '样品数量',
              prop: 'ypsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '质检状态',
              prop: 'show_zt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '批次',
              prop: 'pc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '生产日期',
              prop: 'scrq',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              search: false } ],
        url: '/wmsqualityinspectionlistdetailed/list',
        key: 'id',
        tableColumn: 7,
      },

      dialogTest: {
        title: '质量',
        size: 'large',
        row: {},
      },
      formDialogTest: __formTest(),
      tableTest: {
        column:
          [
            { label: '质检方式',
              prop: 'zjsf',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品编号',
              prop: 'goodsbh',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品名称',
              prop: 'goodsmc',
              minWidth: '190px',
              cRemarks: '',
              search: false },
            { label: '包装名称',
              prop: 'bzmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '单位名称',
              prop: 'dwmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '收货数量',
              prop: 'shsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '应检数量',
              prop: 'yjsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '样品数量',
              prop: 'ypsl',
              minWidth: '0px',
              cRemarks: '',
              elInputNumber: {
                min: 0,
                controls: [false, true],
                max: 'yjsl',
              },
              search: false },
            { label: '质检状态',
              prop: 'show_zt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '批次',
              prop: 'pc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '生产日期',
              prop: 'scrq',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              search: false },
            { label: '',
              prop: 'zt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
          ],
        url: '/wmsqualityinspectionlistdetailed/list',
        key: 'id',
        tableColumn: 9,
      },
      dialogUpload: {
        title: '查看',
        size: 'large',
      },
      tableUpload: {
        column: [
          {
            label: '附件名称',
            prop: 'name',
            minWidth: '0px',
            search: false,
          },
          {
            label: '链接地址',
            prop: 'url',
            minWidth: '0px',
            search: false,
          },
        ],
        data: [ /* {
          hpbh: '20160502',
          hpmc: '王小虎',
          sl: '1518 弄',
          xbh: '1',
        } */ ],
        key: 'id',
        tableColumn: 2,
        muti: false,
      },
      jsonpoid: '',
    },
    transition: 'slide-fade',
    methods: {
      dialogUploadInit () {},
      async dialogUploadOpen (rowdata) {
        this.jsonpoid = rowdata;
        let json = await this.get('/wmspoenclosure/list/' + rowdata);
        let temparr = [];
        let i = 0;
        if (json.length > 0) {
          for (let value of json) {
            temparr[i] = { 'id': value.id, 'poid': value.poid, 'name': value.mc, 'url': PublicImageServer.src + '/excel/zxwms/shipment/' + value.mc };
            i++;
          }
        }
        this.tableUpload.data = temparr;

        this.dialogUpload.visible = true;
      },
      dialogUploadBefore (file) {
        /* const isExcel = file.type === 'application/vnd.ms-excel';
        const isLt = file.size / 1024 / 1024 < 50;
        if (!isExcel) {
          this.$message.error('上传文件只能是 Excel 格式!');
        }
        if (!isLt) {
          this.$message.error('上传头像图片大小不能超过 50MB!');
        }
        return (isExcel) && isLt; */
      },
      async dialogUploadSuccess (res, file, fileList) {
        let poid = this.jsonpoid;
        try {
          await this.post('/wmspoenclosure/add', {
            mc: res.filename,
            poid: poid,
          });
          this.filename = res.filename;
        } finally {
          this.dialogUploadOpen(poid);
          // this.del(this.action + '/' + res.filename);
        }
      },
      dialogUploadError (err) {
        console.log('err', err);
      },
      downloadfile (rowid) {
        let filename = rowid.name;
        window.open(PublicImageServer.src + '/' + 'excel/zxwms/shipment/' + filename);
      },
      async dialogUploadRemove (res, file, fileList) {
        let id = res.poid;
        let ids = [res.id];
        try {
          await this.post('/wmspoenclosure/del', {
            id: id,
            ids: ids,
          });
          // this.tableWatch('table');
        } catch (error) {
          console.log('error:', error);
        }
      },
      dialogUploadSubmit () {
        this.$refs.upload.submit();
      },
      dialogUploadSave () {
        this.dialogUploadInit();
        this.dialogUpload.visible = false;
      },
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          // ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (row) {
        this.dialog.row = row;
        if (this.dialog.title === '修改') {
          this.tableEdit.url = '/wmsqualityinspectionlistdetailed/list/' + row.id;
          this.tableWatch('tableEdit');
        }
        this.dialog.visible = true;
      },
      async dialogSave () {
        let success = true;
        let result = '';
        if (success) {
          this.$confirm('您将保存修改的质检单。', '确认保存？', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          })
            .then(async _ => {
              let data = this.tableEdit.data;
              let step = [];
              data.forEach(item => {
                let option = Object.assign({}, item);
                option.sszjdid = this.dialog.row.id;
                delete option.shsl;
                delete option.show_zt;
                delete option.goodsmc;
                delete option.zjsf;
                delete option.goodsbh;
                delete option.pc;
                delete option.zt;
                delete option.bzmc;
                delete option.scrq;
                delete option.yqsl;
                delete option.dwmc;
                delete option.OldNumber_yjsl;
                for (let index in option) {
                  if (option.hasOwnProperty(index)) {
                    if (!option[index]) {
                      delete option[index];
                    }
                  }
                }
                step.push(option);
              });
              try {
                await this.post('/wmsqualityinspectionlistdetailed/editZjd', step);
                this.tableWatch('table');
                this.dialogInit();
                this.dialog.visible = false;
              } catch (err) {
                console.log(err);
              }
            })
            .catch(_ => {
            });
        } else {
          return this.$alert(result, '提示！');
        }
      },
      dialogSearchOpen (row) {
        if (this.dialogSearch.title === '查看') {
          this.tableSearch.url = '/wmsqualityinspectionlistdetailed/list/' + row.id;
          this.tableWatch('tableSearch');
        }
        this.dialogSearch.visible = true;
      },

      dialogTestInit () {
        this.formDialogTest = {
          ...this.formDialogTest,
          ...this.ObjectClone(__formTest()),
        };
        this.resetFields('formDialogTest');
        this.tableClear('tableTest');
      },
      dialogTestOpen (row) {
        this.dialogTest.row = row;
        console.log('this.dialogTest.row.asnid:' + this.dialogTest.row.asnid);
        if (this.dialogTest.title === '质量') {
          this.tableTest.url = '/wmsqualityinspectionlistdetailed/list/' + row.id;
          this.tableWatch('tableTest');
        }
        this.dialogTest.visible = true;
      },
      dialogTestSave () {
        this.VALIDATE('formDialogTest', async option => {
          option.sszjdid = this.dialogTest.row.id;
          option.asnid = this.dialogTest.row.asnid;
          let step = [];
          this.tableTest.data.forEach(item => {
            // Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
            let option = Object.assign({}, item);
            delete option.bzmc;
            delete option.ckid;
            delete option.dwmc;
            delete option.goodsbh;
            delete option.goodsmc;
            delete option.hpid;
            delete option.page;
            delete option.pc;
            delete option.rows;
            delete option.scrq;
            delete option.show_zt;
            delete option.shsl;
            delete option.yjsl;
            delete option.yjsl;
            delete option.yqsl;
            delete option.zjgzmxid;
            delete option.zjry;
            delete option.zjsf;
            for (let index in option) {
              // hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性
              if (option.hasOwnProperty(index)) {
                if (!option[index] && option[index] !== 0) {
                  delete option[index];
                }
              }
            }
            step.push(option);
          });
          let json = {
            ...option,
            detailed: step,
          };
          try {
            await this.post('/wmsqualityinspectionlistdetailed/addZljy', json);
            console.log('this.dialogTest.row.asnid:' + this.dialogTest.row.asnid);
            this.tableWatch('table');
            this.dialogTestInit();
            this.dialogTest.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
      },
      tableQualified (row) {
        this.$confirm('您将修改该质检状态。', '确认修改？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            row.zt = 1;
            row.show_zt = '合格';
          });
      },
      tableUnqualified (row) {
        this.$confirm('您将修改该质检状态。', '确认修改？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            row.zt = 2;
            row.show_zt = '不合格';
          });
      },
    },
    computed: {
      action: function () {
        return PublicImageServer.src + '/' + PublicImageServer.upload + '/excel/zxwms/shipment';
      },
    },
    mounted: async function () {
      this.tableWatch('table');
      if (!this.DICTIONARY_qualityList) {
        await this.USE('DICTIONARY_qualityList');
      }
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
</style>
